<template>
  <div class="gantt" :ref="ganttName" :style="{ height: height }"></div>
</template>

<script>
/** mixin */
import { mixin_gantt } from './mixin_gantt'
import Vue from 'vue'
/** 工具 */
import { gantt } from 'processit-dhtmlx-gantt'
import { formatDate } from '@tapui/utils/date'

export default {
  mixins: [mixin_gantt],
  name: 'WBSGanttComponent',
  data() {
    return {
      addGantt: {
        config: {
          readonly: true // 只读
        }
      },
      // 时间轴类型
      scalesTypeMap: {
        year: [{ unit: 'year', step: 1, format: '%Y' }],
        month: [{ unit: 'year', step: 1, format: '%Y' }, { unit: 'month', step: 1, format: '%m' }],
        week: [{ unit: 'year', step: 1, format: '%Y' }, { unit: 'week', step: 1, format: '%w' }],
        day: [{ unit: 'month', step: 1, format: '%Y-%m' }, { unit: 'day', step: 1, format: '%d' }]
      }
    }
  },
  props: {
    height: {
      type: String,
      default: '600px'
    },
    // 甘特图数据
    taskData: {
      type: Object,
      default: () => ({
        data: [],
        links: []
      })
    },
    // 时间轴类型，年、月、日三种
    scalesType: {
      type: String,
      default: 'day'
    },
    // 展示字段
    showFields: {
      type: Array,
      default: () => {
        return ['text', 'start_date', 'end_date']
      }
    }
  },
  watch: {
    // 时间轴变化
    scalesType(val) {
      gantt.config.scales = this.scalesTypeMap[val]
      if (this.$tap.validate.validateNull(this.taskData)) {
        return
      }
      gantt.init(this.$refs[this.ganttName])
      this.setDragPositionByDate()
    }
  },
  computed: {
    isPM() {
      if (this.$store.getters.projectroles) {
        return this.$store.getters.projectroles.indexOf('pm') > -1
      } else {
        return false
      }
    }
  },
  methods: {
    /** 初始化 */
    drawerGantt() {
      this.initGantt(this.taskData)
    },
    addInitEvent() {
      // 修改任务树中的显示内容
      this.initColumns()
      // 修改样式
      this.changeClassName()
      // 修改时间轴类型
      gantt.config.scales = this.scalesTypeMap[this.scalesType]
    },
    /** 根据进度类型初始化任务树 */
    initColumns() {
      let allColumns = [
        {
          name: 'text',
          label: '名称',
          width: 250,
          tree: true,
          resize: true,
          template: (obj) => `<span class="tooltip-title">${obj.text}</span>`
        },
        {
          name: 'start_date',
          label: '开始时间',
          width: 100,
          resize: true,
          template: (obj) => obj.start_date
        },
        {
          name: 'end_date',
          label: '结束时间',
          width: 100,
          resize: true,
          template: (obj) => obj.end_date
        }
      ]
      gantt.config.columns = allColumns.filter(item => this.showFields.indexOf(item.name) > -1)
    },
    /** 开启鼠标移上任务条后弹出提示语功能 */
    openTooltip() {
      // 打开提示功能
      gantt.plugins({ tooltip: true })
      // 提示内容
      gantt.templates.tooltip_text = (start, end, task) => {
        const tooltipText = `<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任务名称: </b>${task.text}`
        const userName = `<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;负责人: </b>${task.responsibleusername}`
        const planStartDateStr = `<br/><b>计划开始日期: </b>${task.plan_start_date}`
        const planEndDateStr = `<br/><b>计划结束日期: </b>${task.plan_end_date}`
        const startDateStr = `<br/><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开始日期: </b>${formatDate(task.start_date, 'yyyy-MM-dd')}`
        const endDateStr = `<br/><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束日期: </b>${formatDate(task.end_date, 'yyyy-MM-dd')}`
        const taskfeedbackschedule = `<br/><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任务进度: </b>${task.task_feed_back_schedule}%`

        return `${tooltipText}
            ${task.responsibleusername ? userName : ''}
            ${task.plan_start_date ? planStartDateStr : ''}
            ${task.plan_end_date ? planEndDateStr : ''}
            ${task.start_date ? startDateStr : ''}
            ${task.end_date ? endDateStr : ''}
            ${task.task_feed_back_schedule ? taskfeedbackschedule : ''}`
      }
    },
    /** 修改样式 */
    changeClassName() {
      gantt.templates.task_class = (start, end, task) => {
        const classMap = {
          'done': task.progress >= 1 && task.isOverdue === false,
          'over-time': task.progress < 1 && task.isOverdue === true,
          'over-time-done': task.progress >= 1 && task.isOverdue === true
        }
        return Object.keys(classMap).find((key) => classMap[key]) || 'normal'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.gantt {
  /deep/ .gantt_layout_root {
    .tooltip-title {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .common-state {
      overflow: hidden;
      .gantt_task_progress {
        border-radius: 15px;
        background: #1774ff;
      }
      .gantt_task_content {
        background: none !important;
        border: none;
        font-weight: bold;
        text-overflow: ellipsis;
      }
    }
    .normal {
      @extend .common-state;
      background: #d5e6ff !important;
    }
    .done {
      @extend .common-state;
      background: #1774ff !important;
    }
    .over-time {
      @extend .common-state;
      background: #ffecd5 !important;
      .gantt_task_progress {
        background: #f99109;
      }
    }
    .over-time-done {
      @extend .common-state;
      background: #f99109 !important;
      .gantt_task_progress {
        background: #f99109;
      }
    }
  }
  /deep/ .gantt_task_line {
    border: none;
    border-radius: 15px;
  }
  /deep/ .dragMarkerDefault {
    width: 3px;
    cursor: pointer;
    background-color: #1774ff;
    opacity: 0.7;
  }
}
</style>
